<template>
    <div class="dy_topbar">
        <div class="dy_topbar_left">
            <span v-if="titleLeft.name" @click="clickLeft">
                <i class="fa fa-angle-left fa-2x"></i>
                {{titleLeft.label || ''}}
            </span>
        </div>
        <div class="dy_topbar_mid">
            <label>{{title}}</label>
        </div>
        <div class="dy_topbar_right">
            <span v-if="titleRight.name" @click="clickRight">
                {{titleRight.label || ''}}
                <i class="fa fa-angle-right fa-2x"></i>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'dy-topbar',
    props: {
        title: {
            type: String,
            default: ''
        },
        titleLeft: {
            type: Object,
            default: () => {
                return {}
            }
        },
        titleRight: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data(){
        return {}
    },
    methods: {
        clickLeft(){
            console.log('click left')
        },
        clickRight(){
            this.$store.push({name: this.titleRight.name})
        }
    }
}
</script>

<style lang="less" scoped>
.dy_topbar{
    width: 100%; height: .4rem; line-height: .4rem; overflow: hidden;
    display: flex; flex-flow: row; color: #fff; background-color: #151618; border-bottom: 1px solid #272935;
    position: fixed; left: 0; top: 0;
    .dy_topbar_left{
        flex: 1; text-align: left; align-items: center; justify-content: center;
        i{vertical-align: middle; margin: -0.04rem .05rem 0 .15rem;}
    }
    .dy_topbar_mid{
        flex: 3; text-align: center;
        font-size: .15rem; letter-spacing: 2px;
    }
    .dy_topbar_right{
        flex: 1; text-align: right; align-items: center; justify-content: center;
        i{vertical-align: middle; margin: -0.04rem .15rem 0 .02rem;}
    }
}
</style>
